<template>
  <div class="c-table">
    <el-table
      class="table"
      :data="tableData.data">
      <el-table-column
        v-for="(item, index) in tableData.cols"
        :key="index"
        sortable
        align="center"
        :width="item.width"
        :prop="item.prop"
        :label="item.label"
      />
      <slot></slot>
    </el-table>
    <div class="flex-center-middle lh50">
      <el-pagination
        :page-size="1"
        :current-page="tablePager.currentPage"
        :total="tablePager.total"
        layout="total, -> ,prev, pager, next, jumper"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ITable, IPager } from '@/types/table'
defineProps<{
  tableData: ITable;
  tablePager: IPager;
}>()
// const tableData = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]
const emits = defineEmits<{
  (event: 'currentPageChange', num: number): void;
}>()
const handlePageChange = (pageNum: number) => {
  console.log('pageNum--', pageNum)
  emits('currentPageChange', pageNum)
}
</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
.c-table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // width: 1200px;
  color: $color;
  padding: 1.5rem;
  box-sizing: border-box;
}
.table {
  width: 100%;
  height: calc(100% - 50px);
  box-sizing: border-box;
  position: relative;
}
.lh50 {
  height: 50px;
}
:deep(.el-pagination) {
  // --el-pagination-button-disabled-bg-color: #eee;
  --el-input-bg-color: transparent;
  --el-input-text-color: #29f1fa;
  --el-text-color-regular: #f7f7f7;
  --el-pagination-hover-color: #29f1fa;
  --el-pagination-button-color: #fff;
  --el-pagination-bg-color: transparent;
  --el-pagination-button-disabled-bg-color: transparent;

  // color: var(--el-pagination-button-disabled-color);
  //   background-color: var(--el-pagination-button-disabled-bg-color);
  //   cursor: not-allowed;
  .el-input__wrapper,
  .el-input__inner {
    background-color: transparent;
  }
  .el-pager {
    margin-left: 5px;
    margin-right: 5px;
  }
  li + li {
    margin-left: 5px;
  }
}
:deep(.el-table) {
  --el-table-border: 1px solid #148285;
  --el-table-bg-color: transparent;
  --el-table-text-color: $color;
  --el-table-header-bg-color: rgba($primary_color, 30%);
  --el-table-tr-bg-color: rgba($primary_color, 30%);
  --el-table-header-text-color: $color;
  --el-text-color-secondary: $color;
  --el-table-border-color: transparent;
  // row-hover-bg-color
  border: var(--el-table-border);
  .el-table__row {
    box-sizing: border-box;
  }
  .el-table__row:hover td {
    background-color: rgba($primary_color, 30%) !important;
    box-sizing: border-box;
  }
}
</style>
